import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
    render() {
        //获取全部任务的数量
        let total = this.props.todos.length;
        let comTotal = this.props.todos.filter(item=>item.done).length;

        return (
            <div className="todo-footer">
                <label>
                    <input checked={this.props.todos.every(item => item.done)}  type="checkbox" onChange={this.checkTodoAll}/>
                </label>
                <span>
                    <span>已完成 {comTotal}</span> / 全部 {total}
                </span>
                <button onClick={this.qingli} className="btn btn-danger">清除已完成任务</button>
            </div>
        )
    }

    checkTodoAll = (e) => {
        //获取当前 checkbox 的状态
        // console.log(e.target.checked);
        this.props.checkTodoAll(e.target.checked);
    }

    qingli = () => {
        this.props.clean();
    }
}
